<template>
  <div class="ApplayFor">
    <div class="title">
      <span></span>
      <span>复投申请</span>
    </div>
    <div class='applayfor'>
      <div class="boxStyle">
        <div>复投余额：</div>
        <input type="text" class="bdColor" v-model="price" disabled>
      </div>
      <div class="boxStyle">
        <div>奖金余额：</div>
        <input type="text" class="bdColor" v-model="limit" disabled>
      </div>
      <div class="boxStyle">
        <div>选择帐户：</div>
        <el-select class="chose" v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="boxStyle">
        <div>输入金额：</div>
        <input type="number" v-model="usdtCount" @mousewheel='disabledwheel($event)'>
      </div>
      <div class="boxStyle">
        <div></div>
        <el-button class="colorStyle" type="warning" :plain="true" @click="onBtn">申请复投</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      price: "",
      limit: "",
      usdtCount: "",
      options: [
        {
          value: "0",
          label: "复投账户"
        },
        {
          value: "1",
          label: "奖金账户"
        }
      ],
      value: ""
    };
  },
  created() {
    u.setUser(() => {
      this.limit = JSON.parse(localStorage.getItem("userData")).rewardBalance;
      this.price = JSON.parse(localStorage.getItem("userData")).reCastBalance;
    });
  },
  methods: {
    disabledwheel(evt) {
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    onBtn() {
      if (!t.isNumber(this.usdtCount)) {
        return Message({
          message: "请填写正确的金额",
          type: "error"
        });
      }
      if (this.value == 1 && this.usdtCount > this.limit) {
        return Message({
          message: "输入余额不得超过奖金余额",
          type: "error"
        });
      }
      if (this.value == 0 && this.usdtCount > this.price) {
        return Message({
          message: "输入余额不得超过复投余额",
          type: "error"
        });
      }
      u.shengqingfutou(
        {
          costNum: Number(this.usdtCount),
          type: this.value
        },
        data => {
          if (data.code == 200) {
            u.userInfo({ id: localStorage.getItem("userID") }, data => {
              if (data && data.code == "200") {
                localStorage.setItem("userData", JSON.stringify(data.data));
                Message({
                  message: data.message,
                  type: "success"
                });
                this.$router.push({ path: "/investment" });
              }
            });
          } else {
            return Message({
              message: data.message,
              type: "error"
            });
          }
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.ApplayFor {
  height: 100%;
  background: white;
  overflow-y: auto;

  .applayfor {
    height: calc(100% - 50px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }
  }
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f4f5f6;
    span:nth-child(1) {
      margin: 0px 10px 0px 20px;
      margin-left: 20px;
      line-height: 50px;
      background: #ffb001;
      width: 5px;
      height: 18px;
      display: inline-block;
    }
  }
  .boxStyle {
    margin: 30px 0px 0px 30px;
    display: flex;
    height: 38px;
    line-height: 38px;
    div {
      // border: 1px solid #000;
      width: 165px;
      margin-bottom: 35px;
    }
    input {
      border: 1px solid #ccc;
      width: 338px;
      padding-left: 10px;
    }
    .bdColor {
      border: 1px solid #eee;
    }
    .colorStyle {
      border: none;
      background-color: #ffb001;
      width: 115px;
      height: 38px;
      color: white;
      margin-bottom: 20px;
    }
    .chose {
      width: 338px;
    }
  }
}
</style>
<style>
.el-input__inner {
  border-radius: 0px;
}
</style>
